<template>
  <div class="platformRrules">
    <!-- 中间内容   -->
    <div class="content">
      <div class="tips">
        <span style="color: #777e90">易货大厅</span>&nbsp;>&nbsp;&nbsp;{{
          barterHallDetailInfo.name
        }}
      </div>
      <div class="barter_detil">
        <div class="barter_detil_carousel">
          <div class="barter_detil_carousel_img">
            <img :src="barterHallDetailInfo.image" alt="" />
          </div>
        </div>
        <div class="barter_detil_specifications">
          <div class="barter_detil_tittle">{{ barterHallDetailInfo.name }}</div>
          <!-- 规格-->
          <div>
            <div class="barter_detil_guige">
              <div style="width: 54px">规格：</div>
              <div style="display: flex; flex: 1; flex-wrap: wrap">
                <div
                  class="guige"
                  :class="isFlag == item.id ? 'onguige' : 'guige'"
                  v-for="(item, index) in guigeList"
                  :key="index"
                  @click="guigeChange(item.id)"
                >
                  {{ item.name }}
                </div>
              </div>
            </div>

            <div class="barter_detil_num">
              数量：
              <el-input-number
                v-model="salesNum"
                :min="1"
                :max="9999"
                @change="handleChange"
              />
            </div>
            <div class="barter_detil_price">
              单价：{{ specificationsList.price }}易链值
            </div>
            <div class="barter_detil_mix">
              最小起换量：{{ specificationsList.min_sales_quantity }}
            </div>
            <div class="barter_detil_have">
              可用数量：{{ specificationsList.stock }}
            </div>
          </div>
          <div class="barter_detil_car">
            <div class="ljyd" @click="buyImmediately">
              <img src="../../../assets/images/yd.png" alt="" />
              <span>立即易定</span>
            </div>
            <div class="jrcart" @click="buyImmediatelyAdd">
              <img src="../../../assets/images/cart.png" alt="" />
              <span>加入购物车</span>
            </div>
            <!-- 收藏 -->
            <div
              style="
                display: flex;
                align-items: center;
                margin-left: 15px;
                width: 120px;
              "
            >
              <div
                v-if="barterHallDetailInfo.is_collected == 0"
                style="display: flex; align-items: center"
              >
                <div class="shoucang" @click="shoucang">
                  <img src="../../../assets/images/star.png" alt="" />
                </div>
                <div class="isShoucang" @click="shoucang">收藏</div>
              </div>
              <div v-else style="display: flex; align-items: center">
                <div class="onshoucang" @click="exitshoucang">
                  <img src="../../../assets/images/onstart.png" alt="" />
                </div>
                <div class="onisShoucang" @click="exitshoucang">已收藏</div>
              </div>
            </div>
          </div>
        </div>

        <div class="barter_detil_enterprise">
          <div class="barter_detil_tittle">
            {{ barterHallDetailInfoCompony.name }}
            <img src="../../../assets/images/vip.png" alt="" />
          </div>
          <div class="barter_detil_guige">
            <span
              >关注&nbsp;&nbsp;{{
                barterHallDetailInfoCompony.attention_quantity
              }}&nbsp;&nbsp;粉丝&nbsp;{{
                barterHallDetailInfoCompony.fan_quantity
              }}</span
            >
          </div>
          <div class="barter_detil_num" style="line-height: 30px">
            {{ barterHallDetailInfoCompony.province }}
            {{ barterHallDetailInfoCompony.city }}
            {{ barterHallDetailInfoCompony.county }}
          </div>
          <div class="barter_detil_price">
            <el-rate
              v-model="ratePercent"
              disabled
              show-score
              text-color="#ff9900"
              size="large"
            />
          </div>
          <div class="barter_detil_car">
            <el-button
              style="
                width: 112px;
                height: 46px;
                background: #f0ae3c;
                border-radius: 10px 10px 10px 10px;
                opacity: 1;
                color: #ffffff;
              "
              @click="onContact"
              >联系企业</el-button
            >
            <div v-if="barterHallDetailInfoCompony.is_fan == 0">
              <el-button
                @click="oFollow"
                style="
                  width: 112px;
                  height: 46px;
                  background: #2487e8;
                  border-radius: 10px 10px 10px 10px;
                  opacity: 1;
                  color: #ffffff;
                  margin-left: 15px;
                "
                >去关注</el-button
              >
            </div>
            <div v-else>
              <el-button
                @click="exitoFollow"
                style="
                  width: 112px;
                  height: 46px;
                  background: #2487e8;
                  border-radius: 10px 10px 10px 10px;
                  opacity: 1;
                  color: #ffffff;
                  margin-left: 15px;
                "
                >已关注</el-button
              >
            </div>
          </div>
        </div>
      </div>
      <div v-if="chooseAddress">
        <span style="font-weight: 600">易定地址：</span>
        {{ chooseAddress.province }}
        {{ chooseAddress.city }}
        {{ chooseAddress.county }}
        {{ chooseAddress.address }}
        <span style="margin-left: 15px">{{ chooseAddress.recipient }}</span>
        <span style="margin-left: 15px">{{ chooseAddress.mobile }}</span>
        <span
          style="color: #2487e8; margin-left: 30px; cursor: pointer"
          @click="editAddress"
          >修改地址</span
        >
      </div>
      <div v-else>
        <span style="font-weight: 600">易定地址：</span>
        <span
          style="color: #2487e8; margin-left: 10px; cursor: pointer"
          @click="editAddress"
          >暂无默认地址,请新增收货地址</span
        >
      </div>
      <div class="screen_tab">
        <div
          class="screen_tab_zh"
          :class="is_tab == 1 ? 'on_screen_tab' : 'screen_tab_zh'"
          @click="onScreenTab(1)"
        >
          商品详情
        </div>

        <div
          class="screen_tab_zx"
          :class="is_tab == 2 ? 'on_screen_tab' : 'screen_tab_zh'"
          @click="onScreenTab(2)"
        >
          评价
        </div>
      </div>

      <div class="detail_info">
        <!-- 商品详情 -->
        <div class="detail_info_html" v-if="is_tab == 1">
          <!-- <img src="../../../assets/images/bgc.png" alt="" /> -->
          <div v-html="goodsdescription"></div>
        </div>
        <!-- 评论详情 -->
        <div class="detail_evaluate" v-else>
          <div class="evaluate_all">全部（{{ rateDetailListLen }}）</div>

          <div class="" v-if="rateDetailList.length">
            <div
              class="detail_allinfo"
              v-for="(item, index) in rateDetailList"
              :key="index"
            >
              <div class="detail_allinfo_tittle">
                <img src="../../../assets/images/account.png" alt="" />
                <span>{{ item.company }}</span>
              </div>
              <div class="detail_allinfo_list">
                <div class="rate">
                  评价：
                  <el-rate v-model="item.score" disabled text-color="#ff9900" />
                </div>
                <div class="text">
                  {{ item.content }}
                </div>
                <div style="display: flex; flex-wrap: wrap">
                  <div
                    class="rate_img"
                    v-for="(gitem, gindex) in item.images"
                    :key="gindex"
                  >
                    <img :src="gitem" alt="" />
                  </div>
                </div>
                <div class="rate_time">{{ item.createtime }}</div>
              </div>
            </div>
          </div>
          <div v-else class="none_detail">暂无评价</div>
        </div>
      </div>
    </div>

    <!-- 立即易顶弹框 -->
    <el-dialog
      v-model="centerDialogVisible"
      title="立即易定"
      width="40%"
      align-center
      center
      class="el_ydDialog"
    >
      <div class="centerDialogVisible_footer">
        <div
          :class="
            chain_money > 0
              ? 'centerDialogVisible_footer_btn'
              : 'centerDialogVisible_footer_btnTwo'
          "
          @click="onBuyCenterDialogVisible"
        >
          <div>{{ chain_money }}</div>
          <div>用易链值兑换</div>
        </div>
        <div
          :class="
            available_money > 0
              ? 'centerDialogVisible_footer_btn'
              : 'centerDialogVisible_footer_btnTwo'
          "
          @click="yiEDuBuyCenterDialogVisible"
        >
          <div>{{ available_money }}</div>
          <div>用先易额度兑换</div>
        </div>
      </div>
    </el-dialog>
    <!-- 使用易链接值支付 -->
    <el-dialog
      v-model="yEDuDialogVisible"
      width="40%"
      align-center
      center
      class="el_ydDialog"
    >
      <div
        class="centerDialogVisibleYlian_footer"
        v-if="chain_money >= orderPay.money"
      >
        <div class="centerDialogVisibleYlian_footer_yed">
          本次易定花费
          <span style="color: #2487e8">{{ orderPay.money }}</span> 易链值
        </div>

        <div
          class="centerDialogVisibleYlian_footer_yed"
          style="margin-top: 30px"
        >
          是否易定？
        </div>

        <div class="centerDialogVisibleYlian_footer_btnTwo">
          <el-button
            @click="yEDuDialogVisible = false"
            style="
              width: 178px;
              height: 48px;
              background: rgba(0, 82, 217, 0.12);
              border-radius: 90px 90px 90px 90px;
              opacity: 1;
            "
            round
            >取消</el-button
          >
          <el-button
            @click="YLbuy"
            type="primary"
            style="
              width: 178px;
              height: 48px;
              background: #2487e8;
              border-radius: 90px 90px 90px 90px;
              opacity: 1;
            "
            round
            >确认</el-button
          >
        </div>
      </div>

      <div
        class="centerDialogVisibleYlian_footer"
        v-if="chain_money < orderPay.money"
      >
        <div class="centerDialogVisibleYlian_footer_yed">
          本次易定花费
          <span style="color: #2487e8">{{ orderPay.money }}</span> 易链值
        </div>

        <div
          class="centerDialogVisibleYlian_footer_yed"
          style="margin-top: 30px"
        >
          您的易链值不足，无法易定
        </div>

        <div class="centerDialogVisibleYlian_footer_btnTwo">
          <el-button
            @click="yEDuDialogVisible = false"
            type="primary"
            style="
              width: 178px;
              height: 48px;
              background: #2487e8;
              border-radius: 90px 90px 90px 90px;
              opacity: 1;
            "
            round
            >知道了</el-button
          >
        </div>
      </div>
    </el-dialog>

    <!-- 使用先易额度 -->
    <el-dialog
      v-model="centerDialogVisibleYlian"
      width="40%"
      align-center
      center
      class="el_ydDialogBuy"
    >
      <div class="centerDialogVisibleYlian_footer" v-if="available_money == 0">
        <div class="centerDialogVisibleYlian_footer_btn">
          您还没有先易额度，是否联系担保公司为您担保?
        </div>
        <div class="centerDialogVisibleYlian_footer_danbao">
          小提示:您点击“确定联系”后，担保公司会与您联系，进行资信评估，资信评估通过后，担保公司会为您拨发相应的先易额度，您可使用先易额度易定别人的商品。
        </div>
        <div class="centerDialogVisibleYlian_footer_hetong">
          <span>您可以在线查看《易链值借贷合同》模板</span>
          <el-button
            @click="onQueryTemplate"
            type="primary"
            style="
              width: 88px;
              height: 36px;
              background: #2487e8;
              border-radius: 10px 10px 10px 10px;
              margin-left: 10px;
            "
            >点击查看</el-button
          >
        </div>
        <div
          class="centerDialogVisibleYlian_footer_hetong"
          style="margin: 20px 0"
        >
          <span>您想要担保的金额是：</span>
          <el-input v-model="danbaoJe" placeholder="请输入金额" />元
        </div>
        <div class="centerDialogVisibleYlian_footer_btnTwo">
          <el-button
            @click="yilianQuxiao"
            style="
              width: 178px;
              height: 48px;
              background: rgba(0, 82, 217, 0.12);
              border-radius: 90px 90px 90px 90px;
              opacity: 1;
            "
            round
            >取消</el-button
          >
          <el-button
            @click="onQueRen"
            type="primary"
            style="
              width: 178px;
              height: 48px;
              background: #2487e8;
              border-radius: 90px 90px 90px 90px;
              opacity: 1;
            "
            round
            >确认联系</el-button
          >
        </div>
      </div>
      <div
        class="centerDialogVisibleYlian_footer"
        v-else-if="available_money > orderPay.money"
      >
        <div class="centerDialogVisibleYlian_footer_yed">
          本次易定花费
          <span style="color: #2487e8">{{ orderPay.money }}</span> 先易额度
        </div>
        <div class="centerDialogVisibleYlian_footer_danbao">
          <div class="yedJs">
            本次易定价值 <span style="color: #18bc9f">{{ orderPay.money }}</span
            >先易额度
          </div>
          <div class="yedJs">
            您还需要付费
            <span style="color: #18bc9f">{{
              orderPay.money * guarantee_fee_ratio * 0.01
            }}</span>
            元人民币给易可易平台（{{ guarantee_fee_ratio }}%的担保费:
            本担保费最终解释权归易可易平台）
          </div>
          <div class="yedJs">如您最终退款，该担保费会原路返回</div>
          <div class="yedJs">备注：如您拒绝支付，将不能使用先易额度</div>
        </div>
        <div class="centerDialogVisibleYlian_footer_btnTwo">
          <el-button
            @click="yilianQuxiao"
            type="primary"
            round
            style="
              width: 178px;
              height: 48px;
              background: rgba(0, 82, 217, 0.12);
              border-radius: 90px 90px 90px 90px;
              opacity: 1;
              font-size: 16px;
              font-family: PingFang SC-Medium, PingFang SC;
              font-weight: 500;
              color: #2487e8;
              border: none;
            "
            >取消</el-button
          >
          <el-button
            @click="XYpay"
            type="primary"
            style="
              width: 178px;
              height: 48px;
              background: #e84026;
              border-radius: 90px 90px 90px 90px;
              opacity: 1;
              font-size: 16px;
              font-family: PingFang SC-Medium, PingFang SC;
              font-weight: 500;
              color: #fcfcfd;
              border: none;
            "
            round
            >立即支付</el-button
          >
        </div>
      </div>

      <div class="centerDialogVisibleYlian_footer" v-else>
        <div class="centerDialogVisibleYlian_footer_btn">
          本次易定花费 {{ orderPay.money }} 先易额度
        </div>
        <div class="centerDialogVisibleYlian_footer_btnTwo">
          您的先易额度不足，无法易定，请充值
        </div>
        <div class="centerDialogVisibleYlian_footer_btnTwo">
          <el-button
            @click="yilianzhiNone"
            type="primary"
            style="
              width: 178px;
              height: 48px;
              background: #2487e8;
              border-radius: 90px 90px 90px 90px;
              opacity: 1;
            "
            round
            >知道了</el-button
          >
        </div>
      </div>
    </el-dialog>

    <!-- 易链担保 -->
    <el-dialog
      v-model="centerDialogVisibleDanbao"
      title="您已联系过担保公司，请耐心等待。"
      width="40%"
      align-center
      center
      class="el_ydDialog"
    >
      <div class="centerDialogVisibleYlian_footer">
        <div class="centerDialogVisibleYlian_footer_danbao">
          小提示:您点击“确定联系”后，担保公司会与您联系，进行资信评估，资信评估通过后，担保公司会为您拨发相应的先易额度，您可使用先易额度易定别人的商品。
        </div>
        <div class="centerDialogVisibleYlian_footer_btnTwo">
          <el-button
            @click="danbaoEnding"
            type="primary"
            style="
              width: 490px;
              height: 48px;
              background: #2487e8;
              border-radius: 90px 90px 90px 90px;
              opacity: 1;
            "
            round
            >知道了</el-button
          >
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
// import topInfo from "../../components/topInfo.vue";
// import homePageBottom from "../../components/homePageBottom.vue";
import { onMounted, ref } from "vue";
import { ElMessage } from "element-plus";
import {
  GoodsDetail,
  CollectionCreate,
  CollectionDelete,
  FanCreate,
  FanDelete,
  CommentIndex,
  CartAdd,
  OrderCreate,
  OrderFeeRatio,
  ByChainMoney,
} from "@/api/barterhall";
import { AddressGetDefault } from "@/api/common";
import contractApi from "@/api/contract";
import { CompanyInfo } from "@/api/login";
import { useRouter } from "vue-router";
import { getUserInfo, removeUserInfo } from "@/service";
import { useRoute } from "vue-router";
const route = useRoute();
const router = useRouter();
defineProps({
  msg: String,
});

onMounted(() => {
  // const tittle = router.currentRoute.value.query.tittle;
  const detailId = router.currentRoute.value.query.id; //详情id
  DetailId.value = router.currentRoute.value.query.id; //详情id


  // isFlag.value = route.query.isFlag;
  // console.log("isFlag.value", isFlag.value);
  if (route.query.addressId) {
    console.log("地址", 1111);

    OrderCreateInfo.value.address_id = route.query.addressId;
    let addressInfoList = JSON.parse(route.query.addressInfo);
    console.log("addressInfoList", addressInfoList);
    chooseAddress.value.province = addressInfoList.province;
    chooseAddress.value.city = addressInfoList.city;
    chooseAddress.value.county = addressInfoList.county;
    chooseAddress.value.address = addressInfoList.address;
    chooseAddress.value.recipient = addressInfoList.recipient;
    chooseAddress.value.mobile = addressInfoList.mobile;

    console.log(
      "11111",
      1111,
      chooseAddress.value,
      OrderCreateInfo.value.address_id
    );
  } else {
    console.log("地址", 2222);
    //获取地址
    getAddressGetDefault();
  }

  //选择地址后拿到地址
  // chooseAddress.value = JSON.parse(localStorage.getItem("addressChoose"));

  // let buyAddress = JSON.parse(localStorage.getItem("addressChoose"));
  // console.log("buyAddress", buyAddress);
  // if (buyAddress != null) {
  //   OrderCreateInfo.value.address_id = buyAddress.id;
  // }

  // console.log("chooseAddress.value", chooseAddress.value);
  getBarterHallDetail(detailId);
  getCompanyInfo();
  //获取费率信息
  getOrderFeeRatio();
  //数量
  isCarAddInfo.value.quantity = salesNum.value;
  //下单数量
  OrderCreateInfo.value.quantity = salesNum.value;
});

//查看合同模板
// 查看模版
const onQueryTemplate = () => {
  contractApi.guaranteeTemplate().then((res) => {
    if (res.code == 1) {
      window.open(res.data.url);
    }
  });
};

const guarantee_fee_ratio = ref(""); //担保手续费率（%）

const transaction_fee_ratio = ref(""); //卖家付款手续费率（%）
//获取费率信息
const getOrderFeeRatio = () => {
  OrderFeeRatio().then((res) => {
    if (res.code == 1) {
      guarantee_fee_ratio.value = res.data.guarantee_fee_ratio;
      transaction_fee_ratio.value = res.data.transaction_fee_ratio;
      console.log("res.data", res.data);
    }
    if (res.code == 0) {
      ElMessage({ message: res.msg, type: "error" });
    }
  });
};

//获取地址
const getAddressGetDefault = () => {
  AddressGetDefault()
    .then((res) => {
      console.log("res地址", res.data);
      chooseAddress.value = res.data;
      OrderCreateInfo.value.address_id = res.data.id;
    })
    .catch((err) => {});
};

//查看公司信息是否有额度
const guarantee_money = ref(0); //先易额度
const available_money = ref(0); //可用先易额度
const chain_money = ref(0); //易链值
const getCompanyInfo = () => {
  CompanyInfo().then((res) => {
    console.log("res.data", res.data);
    guarantee_money.value = res.data.guarantee_money;
    available_money.value = res.data.available_money;
    chain_money.value = res.data.chain_money;
  });
};

//起售量
const salesNum = ref(1);
const handleChange = (value) => {
  console.log("数量变化", value);
  salesNum.value = value;
  isCarAddInfo.value.quantity = value;
  //下单数量
  OrderCreateInfo.value.quantity = salesNum.value;
  console.log("salesNum.value", salesNum.value);
};
//判断当前商品是线上还是线下
const CompanyType = ref("");
const DetailId = ref("");
// //评分
const ratePercent = ref(0); //
const barterHallDetailInfo = ref({});
const barterHallDetailInfoCompony = ref({});

//详情
const goodsdescription = ref(null);
//商品id
const goodId = ref("");
//企业id
const componyId = ref("");
//获取商品详情
const getBarterHallDetail = (id) => {
  GoodsDetail({ id: id })
    .then((res) => {
      if (res.code == 1) {
        console.log("111", res.data);
        barterHallDetailInfo.value = res.data;


        goodsdescription.value = res.data.description.replace(
          /<img/g,
          "<img style='max-width:100%;height:auto;'"
        );

        barterHallDetailInfoCompony.value = res.data.company;
        //企业id
        componyId.value = res.data.company.id;
        //企业评分
        ratePercent.value = res.data.company.score;
        //企业线上还是线下类型
        CompanyType.value = res.data.company.type;

        //商品id
        goodId.value = res.data.id;
        //获取商品评论
        commontPage.value.goods_id = res.data.id;
        getProductreviews();

        //规格
        if (res.data.spec_list.length != 0) {
          guigeList.value = res.data.spec_list;
          //默认数据循环
          specificationsList.value = res.data.spec_list[0];
        }
      }
      if (res.code == 0) {
        ElMessage({ message: res.msg, type: "error" });
      }
    })
    .catch((err) => {});
};
//

//规格切换
const isFlag = ref("");
const guigeList = ref([]);
//匹配循环
const specificationsList = ref([]);
//钱
const buyMoney = ref(0);
//规格切换图片显示
const guigeImg = ref("");
const guigeChange = (id) => {
  console.log("规格id", id);
  //下单时候的id
  OrderCreateInfo.value.goods_spec_id = id;
  //这个id易定的时候要传的
  isFlag.value = id;
  //加入购物车是的id
  isCarAddInfo.value.goods_spec_id = id;
  //钱
  guigeList.value.forEach((item) => {
    if (item.id == id) {
      console.log("item11121", item);
      salesNum.value = item.min_sales_quantity;
      guigeImg.value = item.image;

      //切换规格图片显示
      barterHallDetailInfo.value.image = guigeImg.value;
      OrderCreateInfo.value.quantity = item.min_sales_quantity;
      //选择规格用来计算钱的
      buyMoney.value = item.price;
      console.log("buyMoney.value", buyMoney.value);
      specificationsList.value = item;
    }
  });
};

//图片切换
//大图
// const tittle_urlimg = ref(bgcImg);
// const imgList = ref([
//   [
//     { imgUrl: blackImg, id: 1 },
//     { imgUrl: bgcImg, id: 2 },
//     { imgUrl: blackImg, id: 3 },
//   ],
//   [
//     { imgUrl: bgcImg, id: 4 },
//     { imgUrl: blackImg, id: 5 },
//     { imgUrl: bgcImg, id: 6 },
//   ],
//   [
//     { imgUrl: bgcImg, id: 7 },
//     { imgUrl: bgcImg, id: 8 },
//     { imgUrl: bgcImg, id: 9 },
//   ],
// ]);
// const imgStyle = ref(null);
// //点击图片切换
// const urlClick = (url) => {
//   //   imgStyle.value.style.border=
//   console.log("url", url, imgStyle.value);
//   tittle_urlimg.value = url;
// };
//幻灯片切换
// const carouselChange = (val) => {
//   console.log("wdqwedq", val);
// };
// const handleSizeChange = (val) => {
//   console.log(`${val} items per page`);
// };

//切换
const is_tab = ref(1);
const onScreenTab = (tab_id) => {
  onScreenTab;
  is_tab.value = tab_id;
};

//收藏
const status = ref(1);
console.log("goodId", goodId.value);
const shoucang = () => {
  CollectionCreate({ goods_id: goodId.value }).then((res) => {
    if (res.code == 1) {
      barterHallDetailInfo.value.is_collected = 1;
      // getBarterHallDetail(DetailId.value);
      status.value = 2;
      ElMessage({ message: res.msg, type: "success" });
    } else {
      ElMessage({ message: res.msg, type: "error" });
    }
  });
};
//取消收藏
const exitshoucang = () => {
  CollectionDelete({ goods_id: goodId.value }).then((res) => {
    if (res.code == 1) {
      barterHallDetailInfo.value.is_collected = 0;
      status.value = 1;
      // getBarterHallDetail(DetailId.value);
      ElMessage({ message: res.msg, type: "success" });
    } else {
      ElMessage({ message: res.msg, type: "error" });
    }
  });
};
//关注
const isoFollow = ref(1);
const oFollow = () => {
  FanCreate({ target_company_id: componyId.value }).then((res) => {
    if (res.code == 1) {
      isoFollow.value = 2;
      barterHallDetailInfoCompony.value.is_fan = 1;
      ElMessage({ message: res.msg, type: "success" });
      // getBarterHallDetail(DetailId.value);
    }
    if (res.code == 0) {
      ElMessage({ message: res.msg, type: "warning" });
    }
  });
};
//取消关注
const exitoFollow = () => {
  FanDelete({ id: componyId.value }).then((res) => {
    if (res.code == 1) {
      isoFollow.value = 1;
      barterHallDetailInfoCompony.value.is_fan = 0;
      ElMessage({ message: res.msg, type: "success" });
      // getBarterHallDetail(DetailId.value);
    }
  });
};
const commontPage = ref({
  goods_id: "",
  page: 1,
  page_size: 99999,
});
//评价列表
const rateDetailList = ref([]);

const rateDetailListLen = ref(0);
//获取评价
const getProductreviews = () => {
  CommentIndex(commontPage.value).then((res) => {
    if (res.code == 1) {
      rateDetailList.value = res.data.data;
      rateDetailListLen.value = res.data.data.length;
      // console.log("res.data", res.data.data);
    }
  });
};

const isCarAddInfo = ref({
  goods_spec_id: "",
  quantity: 0,
});
//添加购物车
const buyImmediatelyAdd = () => {
  if (isCarAddInfo.value.goods_spec_id == "") {
    ElMessage({ message: "请选择规格", type: "warning" });
    return;
  }
  if (isCarAddInfo.value.quantity == 0) {
    ElMessage({ message: "请选择数量", type: "warning" });
    return;
  }
  CartAdd(isCarAddInfo.value).then((res) => {
    if (res.code == 1) {
      ElMessage({ message: res.msg, type: "success" });
    } else {
      ElMessage({ message: res.msg, type: "warning" });
    }
  });
  // console.log("isCarAddInfo", isCarAddInfo.value);
};
// //立即易订

const OrderCreateInfo = ref({
  source: 1, //1是商品详情 2是购物车
  goods_spec_id: "", //商品规格ID（商品详情页下单）
  quantity: salesNum.value, //下单数量（商品详情页下单）
  cart_ids: "", //购物车ID集（购物车页下单)
  address_id: "", //下单地址ID（线上商品下单均要传）
});
// //弹框
const centerDialogVisible = ref(false);

//订单支付成功的订单id 和支付钱
const orderPay = ref({
  id: "",
  money: "",
});
const buyImmediately = () => {
  if (isCarAddInfo.value.goods_spec_id == "") {
    ElMessage({ message: "请选择规格", type: "warning" });
    return;
  }

  if (CompanyType.value == 1 && OrderCreateInfo.value.address_id == "") {
    ElMessage({
      message: "您是线上企业，请选择发货地址，再进行易顶",
      type: "warning",
    });
    // router.push("/select-address");
    router.push({
      path: "/select-address",
      query: {
        isFlag: 1,
        DetailId: DetailId.value,
      },
    });
    return;
  }
  //先走订单 再弹框
  OrderCreate(OrderCreateInfo.value).then((res) => {
    if (res.code == 1) {
      console.log("易定", res.data);
      ElMessage({
        message: "下单成功请进行支付",
        type: "success",
      });
      centerDialogVisible.value = true;
      //下单成功的id以及价格都返回来了
      orderPay.value.id = res.data.id;
      orderPay.value.money = res.data.money;
    }
    if (res.code == 0) {
      ElMessage({
        message: res.msg,
        type: "warning",
      });
    }
  });
};

//易链值支付
const YLbuy = () => {
  ByChainMoney({ order_id: orderPay.value.id }).then((res) => {
    if (res.code == 1) {
      ElMessage({
        message: res.msg,
        type: "success",
      });
      yEDuDialogVisible.value = false;
      centerDialogVisible.value = false;
    }
    if (res.code == 0) {
      ElMessage({
        message: res.msg,
        type: "error",
      });
      yEDuDialogVisible.value = false;
      centerDialogVisible.value = false;
    }
  });
};

//先易额度支付
const XYpay = () => {
  router.push({
    path: "/pay",
    query: {
      id: orderPay.value.id, //订单id
      money: orderPay.value.money, //订单钱
      premiumrate: transaction_fee_ratio.value, //付款手续费用
      type: 2, //类型:1=认证缴费,2=担保费支付,3=还款,4=付款
      return_url: "/my-easy",
    },
  });
};
const yilianzhi = ref(977); //拥有的
const yilianzhiOrder = ref(900); //购买所需的
//使用易链值购买 打开弹框购买

const centerDialogVisibleYlian = ref(false);
//需要支付的钱
// const payMoney = ref(0);
//修改地址
const editAddress = () => {
  router.push({
    path: "/select-address",
    query: {
      isFlag: 1,
      DetailId: DetailId.value,
    },
  });
};
//支付地址选择
const chooseAddress = ref({});
//易联值支付弹框
const onBuyCenterDialogVisible = () => {
  // if (chooseAddress.value == null) {
  //   ElMessage({ message: "先选择地址再进行易定", type: "error" });
  //   router.push("/select-address");
  //   return;
  // }

  yEDuDialogVisible.value = true;
  // payMoney.value = Number(salesNum.value) * Number(buyMoney.value);
  // console.log("payMoney.value", payMoney.value);
};

const yEDuDialogVisible = ref(false);
//先易额度支付弹框
const yiEDuBuyCenterDialogVisible = () => {
  // if (chooseAddress.value == null) {
  //   ElMessage({ message: "先选择地址再进行易定", type: "error" });
  //   router.push("/select-address");
  //   return;
  // }

  centerDialogVisibleYlian.value = true;
  // payMoney.value = Number(salesNum.value) * Number(buyMoney.value);
};

//易链值是否交易
const yilianQuxiao = () => {
  centerDialogVisibleYlian.value = false;
};
//易链值不够关闭弹框
const yilianzhiNone = () => {
  centerDialogVisibleYlian.value = false;
};
//没有易链值 担保
const danbaoJe = ref(0);
//确认联系担保
const centerDialogVisibleDanbao = ref(false);

const onQueRen = () => {
  // 去担保
  contractApi.guaranteeApply({ money: danbaoJe.value }).then((res) => {
    if (res.code == 1) {
      centerDialogVisibleYlian.value = false;
      centerDialogVisible.value = false;
      ElMessage({ message: res.msg, type: "success" });
      setTimeout(() => {
        // getGuaranteeInfo();
        centerDialogVisibleDanbao.value = true;
      }, 1000);
    }
    if (res.code == 0) {
      centerDialogVisibleYlian.value = false;
      centerDialogVisible.value = false;
      ElMessage({ message: res.msg, type: "warning" });
      setTimeout(() => {
        // getGuaranteeInfo();
        centerDialogVisibleDanbao.value = true;
      }, 1000);
    }
  });
};
const danbaoEnding = () => {
  centerDialogVisibleDanbao.value = false;
};

// 联系企业
const onContact = () => {
  window.open("https://mdkvip.zaixianvip.net/web/im?cptid=a8a4a1770ec4");
};
</script>

<style scoped lang="less">
// 弹框
.platformRrules {
  :deep(.el-dialog) {
    border-radius: 16px 16px 16px 16px;
  }
  :deep(.el-dialog__header) {
    font-size: 23px;
    font-family: PingFang SC-Bold, PingFang SC;
    font-weight: bold;
    color: #141416;
  }
  :deep(.el-rate) {
    height: 14px;
  }
}
.centerDialogVisible_footer {
  //   border: 1px solid red;
  display: flex;
  flex-direction: column;
  align-items: center;
  .centerDialogVisible_footer_btn {
    width: 372px;
    height: 114px;
    background: #2487e8;
    border-radius: 12px 12px 12px 12px;
    opacity: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    font-family: DIN-Bold, DIN;
    font-weight: bold;
    color: #ffffff;
    cursor: pointer;
    margin-bottom: 30px;
  }
  .centerDialogVisible_footer_btnTwo {
    width: 372px;
    height: 114px;
    background: #d9d9d9;
    border-radius: 12px 12px 12px 12px;
    opacity: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    // margin-top: 32px;
    font-size: 28px;
    font-family: DIN-Bold, DIN;
    font-weight: bold;
    color: #ffffff;
    cursor: pointer;
    margin-bottom: 30px;
  }
}
.centerDialogVisibleYlian_footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  .centerDialogVisibleYlian_footer_yed {
    height: 48px;
    font-size: 23px;
    font-family: PingFang SC-Bold, PingFang SC;
    font-weight: bold;
    color: #141416;
    line-height: 48px;
  }
  .centerDialogVisibleYlian_footer_danbao {
    font-size: 16px;
    font-family: PingFang SC-Medium, PingFang SC;
    font-weight: 500;
    color: #18bc9f;
    margin: 32px 0;
    .yedJs {
      font-size: 20px;
      font-family: PingFang SC-Medium, PingFang SC;
      font-weight: 500;
      color: rgba(0, 0, 0, 0.87);
      line-height: 40px;
    }
  }
  .centerDialogVisibleYlian_footer_hetong {
    display: flex;
    align-items: center;
    span {
      font-size: 16px;
      font-family: PingFang SC-Medium, PingFang SC;
      font-weight: 500;
      color: #2487e8;
      width: 100%;
    }
  }
  .centerDialogVisibleYlian_footer_btn {
    height: 48px;
    font-size: 23px;
    font-family: PingFang SC-Bold, PingFang SC;
    font-weight: bold;
    color: #141416;
    line-height: 48px;
  }
  .centerDialogVisibleYlian_footer_btnTwo {
    height: 48px;
    font-size: 23px;
    font-family: PingFang SC-Bold, PingFang SC;
    font-weight: bold;
    color: #141416;
    line-height: 48px;
    margin-top: 20px;
  }
}
.demonstration {
  color: var(--el-text-color-secondary);
}

.el-carousel__item h3 {
  color: #475669;
  opacity: 0.75;
  line-height: 71px;
  margin: 0;
  text-align: center;
}

// .el-carousel__item:nth-child(2n) {
//   background-color: #99a9bf;
// }

// .el-carousel__item:nth-child(2n + 1) {
//   background-color: #d3dce6;
// }
/* .read-the-docs {
      color: #000;
    } */
.platformRrules {
  display: flex;
  flex-direction: column;
  // border: 1px solid red;
  // height: 100%;
  width: 100%;
  background: #fff;
  border-radius: 0px 0px 0px 0px;

  .content {
    width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    // 没有数据
    .tips {
      height: 56px;
      line-height: 56px;
      border-radius: 0px 0px 0px 0px;
      opacity: 1;
      font-size: 14px;
      font-family: PingFang SC-Medium, PingFang SC;
      font-weight: 500;
      color: rgba(0, 0, 0, 0.87);
    }
    .barter_detil {
      //   border: 1px solid red;
      margin-top: 30px;
      display: flex;
      .barter_detil_carousel {
        width: 380px;
        height: 372px;
        border-radius: 0px 0px 0px 0px;
        opacity: 1;
        display: flex;
        flex-direction: column;
        align-items: center;

        .barter_detil_carousel_img {
          //   border: 1px solid red;
          width: 380px;
          height: 287px;
          border-radius: 0px 0px 0px 0px;
          opacity: 1;
          img {
            height: 100%;
            width: 100%;
          }
        }
        .barter_detil_carousel_info {
          width: 380px;
          height: 71px;
          border-radius: 0px 0px 0px 0px;
          opacity: 1;
          margin-top: 16px;
          //   border: 1px solid red;
          display: flex;
          align-items: center;
          .url_left {
            width: 54px;
          }
          .url_count {
            // border: 1px solid red;
            // width: 100%;
            width: 347px;
            height: 69px;
            border-radius: 0px 0px 0px 0px;
            opacity: 1;
            overflow: hidden;
            .url_count_carousel {
              width: 343px;
              height: 66px;
              // border: 1px solid green;
              .url_count_carousel_flex {
                display: flex;
                border: 1px solid red;
                width: 100%;
              }
            }
          }
          .url_right {
            width: 54px;
            // margin-left: 20px;
          }
        }
      }
      .barter_detil_specifications {
        flex: 1;
        // border: 1px solid red;
        margin-left: 24px;
        .barter_detil_tittle {
          height: 36px;
          font-size: 24px;
          font-family: PingFang SC-Bold, PingFang SC;
          font-weight: bold;
          color: #000000;
          line-height: 36px;
          display: flex;
          align-items: center;
        }
        .barter_detil_guige {
          // height: 36px;
          line-height: 36px;
          border-radius: 0px 0px 0px 0px;
          opacity: 1;
          font-size: 18px;
          font-family: PingFang SC-Medium, PingFang SC;
          font-weight: 500;
          color: #333333;
          margin-top: 16px;
          display: flex;
          flex-wrap: wrap;
          .guige {
            // width: 100px;
            padding: 0 8px;
            height: 36px;
            // line-height: 36px;
            text-align-last: center;
            cursor: pointer;
            background: #f5f5f5;
            border-radius: 6px 6px 6px 6px;
            opacity: 1;
            border: 1px solid #e6e6e6;
            font-size: 16px;
            font-family: PingFang SC-Medium, PingFang SC;
            font-weight: 500;
            color: rgba(0, 0, 0, 0.6);
            margin-right: 8px;
            margin-bottom: 5px;
            // flex: 1;
            // display: flex;
            // flex-wrap: wrap;
          }
          .onguige {
            background: rgba(0, 82, 217, 0.12);
            border-radius: 6px 6px 6px 6px;
            opacity: 1;
            border: 1px solid #2487e8;
            color: #2487e8;
          }
        }
        .barter_detil_num {
          //   height: 32px;
          line-height: 32px;
          border-radius: 0px 0px 0px 0px;
          opacity: 1;
          font-size: 18px;
          font-family: PingFang SC-Medium, PingFang SC;
          font-weight: 500;
          color: #333333;
          margin-top: 12px;
        }
        .barter_detil_price {
          //   height: 25px;
          font-size: 18px;
          font-family: PingFang SC-Medium, PingFang SC;
          font-weight: 500;
          color: #333333;
          line-height: 25px;
          margin-top: 16px;
        }
        .barter_detil_type {
          //   height: 25px;
          font-size: 18px;
          font-family: PingFang SC-Medium, PingFang SC;
          font-weight: 500;
          color: #333333;
          line-height: 25px;
          margin-top: 16px;
        }

        .barter_detil_mix {
          //   height: 25px;
          font-size: 18px;
          font-family: PingFang SC-Medium, PingFang SC;
          font-weight: 500;
          color: #333333;
          line-height: 25px;
          margin-top: 16px;
        }
        .barter_detil_have {
          //   height: 25px;
          font-size: 18px;
          font-family: PingFang SC-Medium, PingFang SC;
          font-weight: 500;
          color: #333333;
          line-height: 25px;
          margin-top: 16px;
        }
        .barter_detil_car {
          //   border: 1px solid red;
          margin-top: 18px;
          display: flex;
          //   margin-left: 15px;
          .ljyd {
            width: 118px;
            height: 22px;
            padding: 12px 12px;
            background: #f0ae3c;
            border-radius: 10px 10px 10px 10px;
            opacity: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            img {
              width: 20px;
              height: 20px;
            }
            span {
              line-height: 22px;
              font-size: 16px;
              font-family: PingFang SC-Medium, PingFang SC;
              font-weight: 500;
              color: #ffffff;
              text-align: center;
              margin-left: 5px;
            }
          }
          .jrcart {
            margin-left: 10px;
            width: 118px;
            height: 22px;
            padding: 12px 12px;
            background: #2487e8;
            border-radius: 10px 10px 10px 10px;
            opacity: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            img {
              width: 20px;
              height: 20px;
            }
            span {
              line-height: 22px;
              font-size: 16px;
              font-family: PingFang SC-Medium, PingFang SC;
              font-weight: 500;
              color: #ffffff;
              text-align: center;
              margin-left: 5px;
            }
          }
          .shoucang {
            width: 36px;
            height: 36px;
            margin-left: 5px;
            font-size: 20px;
            font-family: PingFang SC-Medium, PingFang SC;
            font-weight: 500;
            color: rgba(0, 0, 0, 0.87);
            cursor: pointer;
            img {
              height: 100%;
              width: 100%;
            }
          }
          .isShoucang {
            margin-left: 5px;
            font-size: 20px;
            font-family: PingFang SC-Medium, PingFang SC;
            font-weight: 500;
            color: rgba(0, 0, 0, 0.87);
            cursor: pointer;
          }
          .onisShoucang {
            width: 65px;
            margin-left: 5px;
            font-size: 20px;
            font-family: PingFang SC-Medium, PingFang SC;
            font-weight: 500;
            color: #ffa80f;
            cursor: pointer;
          }
          .onshoucang {
            color: #ffa80f;
            font-size: 20px;
            margin-left: 5px;
            font-size: 20px;
            font-family: PingFang SC-Medium, PingFang SC;
            font-weight: 500;
            cursor: pointer;
          }
        }
      }
      .barter_detil_enterprise {
        margin-left: 24px;
        width: 376px;
        height: 248px;
        border-radius: 0px 0px 0px 0px;
        opacity: 1;
        border: 1px solid #e6e6e6;
        padding: 12px;
        box-sizing: border-box;
        .barter_detil_tittle {
          //   height: 36px;
          font-size: 24px;
          font-family: PingFang SC-Bold, PingFang SC;
          font-weight: bold;
          color: #000000;
          // line-height: 36px;
          display: flex;
          align-items: center;
        }
        .barter_detil_guige {
          //   height: 25px;
          line-height: 25px;
          border-radius: 0px 0px 0px 0px;
          opacity: 1;
          font-size: 18px;
          font-family: PingFang SC-Medium, PingFang SC;
          font-weight: 500;
          color: #333333;
          margin-top: 10px;
        }
        .barter_detil_num {
          //   height: 25px;
          line-height: 25px;
          border-radius: 0px 0px 0px 0px;
          opacity: 1;
          font-size: 18px;
          font-family: PingFang SC-Medium, PingFang SC;
          font-weight: 500;
          color: #333333;
          margin-top: 10px;
        }
        .barter_detil_price {
          //   height: 25px;
          font-size: 18px;
          font-family: PingFang SC-Medium, PingFang SC;
          font-weight: 500;
          color: #333333;
          //   line-height: 25px;
          margin-top: 10px;
        }
        .barter_detil_type {
          //   height: 25px;
          font-size: 18px;
          font-family: PingFang SC-Medium, PingFang SC;
          font-weight: 500;
          color: #333333;
          line-height: 25px;
          margin-top: 10px;
        }
        .barter_detil_car {
          margin-top: 10px;
          display: flex;
        }
      }
    }
    .screen_tab {
      height: 50px;
      border-radius: 0px 0px 0px 0px;
      opacity: 1;
      border-bottom: 1px solid #2487e8;
      width: 100%;
      display: flex;
      align-content: center;
      align-items: center;
      margin-top: 22px;
      margin-bottom: 16px;
      .screen_tab_zh {
        height: 50px;
        line-height: 50px;
        text-align: center;
        border-radius: 0px 0px 0px 0px;
        opacity: 1;
        border: 1px solid #2487e8;
        font-size: 14px;
        font-family: PingFang SC-Medium, PingFang SC;
        font-weight: 500;
        color: #2487e8;
        // width: 50%;
        width: 100px;
        cursor: pointer;
      }
      .screen_tab_zx {
        height: 50px;
        line-height: 50px;
        text-align: center;
        border-radius: 0px 0px 0px 0px;
        opacity: 1;
        border: 1px solid #2487e8;
        font-size: 14px;
        font-family: PingFang SC-Medium, PingFang SC;
        font-weight: 500;
        color: #2487e8;
        width: 100px;
        cursor: pointer;
      }

      .on_screen_tab {
        background: #2487e8;
        font-size: 14px;
        font-family: PingFang SC-Medium, PingFang SC;
        font-weight: 500;
        color: #ffffff;
        cursor: pointer;
      }
    }
    .detail_info {
      // border: 1px solid red;

      .detail_info_html {
        width: 100%;
        // height: 464px;
        min-height: 464px;
        border-radius: 0px 0px 0px 0px;
        opacity: 1;
        // border: 1px solid red;

        img {
          height: 100%;
          width: 100%;
        }
      }
      .detail_evaluate {
        border-radius: 0px 0px 0px 0px;
        opacity: 1;
        border: 1px solid #e6e6e6;
        min-height: 464px;
        .evaluate_all {
          height: 46px;
          line-height: 46px;
          background: #f5f5f5;
          border-radius: 8px 8px 8px 8px;
          opacity: 1;
          margin: 6px 10px;
          font-size: 16px;
          font-family: PingFang SC-Bold, PingFang SC;
          font-weight: bold;
          color: rgba(0, 0, 0, 0.87);
          padding-left: 16px;
        }
        .none_detail {
          min-height: 464px;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 24px;
          font-family: PingFang SC-Bold, PingFang SC;
          font-weight: bold;
          color: rgba(0, 0, 0, 0.87);
        }
        .detail_allinfo {
          border-bottom: 1px solid #e6e6e6;
          margin: 6px 10px;
          box-sizing: border-box;
          padding: 16px;
          background: #ffffff;
          border-radius: 0px 0px 0px 0px;
          opacity: 1;
          display: flex;
          .detail_allinfo_tittle {
            width: 128px;
            // height: 106px;
            border-radius: 0px 0px 0px 0px;
            opacity: 1;
            // border: 1px solid red;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            margin-top: 34px;
            img {
              height: 72px;
              width: 72px;
              border-radius: 36px;
            }
            span {
              margin-top: 12px;
              font-size: 16px;
              font-family: PingFang SC-Bold, PingFang SC;
              font-weight: bold;
              color: rgba(0, 0, 0, 0.87);
            }
          }
          .detail_allinfo_list {
            flex: 1;
            margin-left: 16px;
            // border: 1px solid red;
            display: flex;
            flex-direction: column;
            .rate {
              height: 25px;
              font-size: 18px;
              font-family: PingFang SC-Bold, PingFang SC;
              font-weight: bold;
              color: rgba(0, 0, 0, 0.87);
              line-height: 25px;
              margin-bottom: 8px;
            }
            .text {
              //   width: 1000px;
              //   height: 22px;
              font-size: 16px;
              font-family: PingFang SC-Medium, PingFang SC;
              font-weight: 500;
              color: rgba(0, 0, 0, 0.87);
              line-height: 22px;
              //   overflow: hidden;
              //   white-space: nowrap;
              //   text-overflow: ellipsis;
              //   -o-text-overflow: ellipsis;
              margin-bottom: 8px;
            }
            .rate_img {
              border-radius: 0px 0px 0px 0px;
              opacity: 1;
              margin-bottom: 8px;
              margin-right: 10px;
              display: flex;
              flex-wrap: wrap;
              // border: 1px solid red;

              img {
                width: 106px;
                height: 80px;
                // margin-right: 10px;
              }
            }
            .rate_time {
              height: 22px;
              font-size: 16px;
              font-family: PingFang SC-Medium, PingFang SC;
              font-weight: 500;
              color: rgba(0, 0, 0, 0.87);
              line-height: 22px;
            }
          }
        }
      }
    }
  }
  .plat_bottom {
    margin-top: 25px;
  }
}
</style>
